<template>
  <div>
    <el-row class="handleBox">
      <el-col :span="8">
        <el-button type="primary">新增</el-button>
        <el-button type="primary">编辑</el-button>
        <el-button type="primary">删除</el-button>
      </el-col>
      <el-col :span="8"></el-col>
      <el-col class="fr" :span="8">
        <el-popover :visible-arrow="false" placement="bottom" width="150" trigger="click" popper-class="icon_porper">
          <div class="search">
            <ul>
              <li></li>
            </ul>
          </div>
          <i class="el-icon-search" slot="reference"></i>
        </el-popover>
        <el-popover placement="bottom" width="150" trigger="click" popper-class="icon_porper">
          <div class="operation">
            <el-checkbox-group v-model="checkList">
              <el-checkbox
                v-for="item in textData"
                :label="item.label"
                :key="item.prop"
                style="color:#fff"
              >{{item.label}}</el-checkbox>
            </el-checkbox-group>
          </div>
          <i class="el-icon-s-operation" slot="reference"></i>
        </el-popover>
        <i class="el-icon-s-operation"></i>
        <i class="el-icon-s-operation"></i>
      </el-col>
    </el-row>
    <el-table :data="tableData"  style="width: 100%">
      <el-table-column width="55" type="selection" fixed="left"></el-table-column>
      <el-table-column 
                v-for="(item, key) in showData" 
                :key="key" 
                :prop="item.prop"
                :label="item.label"
                :show-overflow-tooltip="true"
                :render-header="item.render"
                :sortable="item.sortable"
            >
       </el-table-column>
      <el-table-column label="操作" width="180" fixed="right"></el-table-column>
    </el-table>
  </div>
</template>

<script>
// import { getNameByCode } from "../lib/util";
export default {
  data() {
    return {
      checkList: [],
      // 完整表头字段和设置
      textData: [
        { prop: "name", label: "名字"},
        { prop: "date", label: "日期",sortable:true},
        { prop: "address", label: "地址" }
      ],
      tableData: [
      ]
    };
  },
  created() {
   this.checkList =  this.textData.map(v=>{return v.label})
  },
  computed: {
    // 展示字段
    showData(){
      let arr = this.textData.map((v)=>{return v.label});
      let valArr = [],showData = []; 
      // 选中的字段排序
      arr.forEach(element => {
        let flag = false;
       this.checkList.forEach(e=>{
         if(e==element){flag = true}
       })
        if(flag){ valArr.push(element) }
      });
      // 控制表列隐藏显示
      for (let i = 0; i < this.checkList.length; i++) {
        for (let j = 0; j < this.textData.length; j++) {
           if(this.textData[j].label == valArr[i]){
             let item = {...this.textData[j]}
             showData.push(item)
           }
        }
      }
      return showData
    }
  },
  mounted() {
  },
  watch: {},
  methods: {
  //   tablePropsShowChange(val) {
  //     let len = val.length;
  //     this.showData = [];
  //     let arr = this.textData.map((v)=>{return v.label});
  //     let valArr = [];
  //     // 排序，选择隐藏会打乱顺序
  //     arr.forEach(element => {
  //       let flag = false;
  //      val.forEach(e=>{
  //        if(e==element){flag = true}
  //      })
  //       if(flag){ valArr.push(element) }
  //     });
  //     // 控制显示表列隐藏
  //     for (let i = 0; i < len; i++) {
  //       for (let j = 0; j < this.textData.length; j++) {
  //          if(this.textData[j].label == valArr[i]){
  //            let item = {...this.textData[j]}
  //            this.showData.push(item)
  //          }
  //       }
  //     }
  //   }
  }
};
</script>

<style lang="scss" scoped>
</style>